<template>
    <div class="base-page-box">
        <div class="header" v-if="showHeader" :class="{ 'header-bottom-line': showLine }">
            <div class="left">
                <div class="block" v-if="title || $slots.headerLeft"></div>
                <div class="title">
                    <slot name="headerLeft">
                        {{ title }}
                    </slot>
                </div>
            </div>
            <div class="right">
                <slot name="headerRight"></slot>
            </div>
        </div>
        <div class="content" v-if="showContent" :class="{ 'pb-0!': contentScrollbar }">
            <el-scrollbar class="pb-$base-page-box-content-padding" v-if="contentScrollbar">
                <slot></slot>
            </el-scrollbar>
            <slot v-else></slot>
        </div>
    </div>
</template>

<script lang="jsx" setup>
const porps = defineProps({
    showHeader: {
        type: Boolean,
        default: false
    },
    showLine: {
        type: Boolean,
        default: true
    },
    showContent: {
        type: Boolean,
        default: true
    },
    title: {
        type: String,
        default: ''
    },
    contentScrollbar: {
        type: Boolean,
        default: false
    }
})
</script>

<style lang="scss" scoped>
.base-page-box {
    --base-page-box-shadow: 0 0 5px rgb(0 0 0 / 8%);
    --base-page-box-content-padding: 10px;

    width: 100%;
    background-color: #fff;
    display: flex;
    flex-shrink: 0;
    min-height: 0;
    min-width: 0;
    flex-flow: column nowrap;
    box-shadow: var(--base-page-box-shadow);

    .header {
        width: 100%;
        height: 50px;
        display: flex;
        padding: 0 10px;

        .left {
            flex: 1 0;
            min-width: 0;
            display: flex;
            align-items: center;
            height: 100%;

            .block {
                width: 4px;
                height: 17px;
                background-color: var(--el-color-primary);
                margin-right: 8px;
            }

            .title {
                font-size: 18px;
                font-weight: 600;
                color: var(--el-text-color-regular);
            }
        }

        .right {
            display: flex;
            align-items: center;
        }
    }

    .header-bottom-line {
        border-bottom: 1px solid #e9e9e9;
    }

    .content {
        padding: var(--base-page-box-content-padding);
        flex: 1 0;
        min-height: 0;
    }
}
</style>